{% extends 'content_base.html' %}

{% block body_parameters %} ex:ondataload="onDataLoad" {% endblock %} 


{% block preJQuery %}
<link rel='stylesheet' href='/media/top_button.css' type='text/css' />
<link type="text/css" href="/media/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<link rel="stylesheet" href="/media/js/colorbox/colorbox.css" type="text/css" media="screen" />
<link rel="exhibit/data" 
       type="application/jsonp"
       href="https://spreadsheets.google.com/feeds/list/0AnEtH40HxJqMdHVMSEktN0hoRkZwc0ZDTFlmMEVjV2c/od6/public/basic?alt=json-in-script"
       ex:converter="googleSpreadsheets" />
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>
{% endblock %}

{% block postJQuery %}
<script type="text/javascript" src="/media/js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/media/js/jquery-jscrollpane/jquery.jscrollpane.min.js"></script>
{% endblock %}

{% block scriptJS %}	
	
<script type="text/javascript">
	
function refresh() {
	$("article[className='hentry']").addClass("hentry");
	$("div[className='entry-title']").addClass("entry-title");
	$("div[className='entry-subtitle']").addClass("entry-subtitle");
	$("div[className='item-header']").addClass("item-header");
	$("div[className='content']").addClass("content");
	$("div[className='entry-content']").addClass("entry-content");
	$("div[className='project-lastLine']").addClass("project-lastLine");
	$("footer[className='post-info']").addClass("post-info");
	
	$('.massmedia .content').jScrollPane({showArrows: true,arrowScrollOnHover: true});
	
	$(".massmedia .item-header").each(function(index) {
			$(this).attr('href', "/toolbar_page?iframe=" + $(this).attr('href'));
  	});
	
	$('.exhibit-facet-body').jScrollPane({showArrows: true,arrowScrollOnHover: true});
};	
	

function onDataLoad() {
	window.exhibit = Exhibit.create();
    window.exhibit.configureFromDOM();
	
	var _historyListener = {
        //onBeforePerform:       - function(action) { alert('beforePerform') },
        onAfterPerform: function(action) { refresh() },
    };
	window.simile = SimileAjax;
    window.simile.History.addListener(_historyListener); 
	refresh();	
}

</script>
{% endblock %}

{% block top_nav %}
<div class="container_24">
	<div class="facets grid_14">
			<div class="grid_6 suffix_1">
				<div ex:role="facet" ex:expression=".type" ex:facetLabel="Tipus" ex:height="70px" ex:scroll="false" ></div>
			</div>
			<div class="grid_6">
				<div ex:role="facet" ex:expression=".nom_mitja" ex:facetLabel="Mitjà" ex:height="70px" ex:scroll="false"></div>
			</div>
			<div style="clear:both"></div>
	</div>
    <a class="awesome" style="float:right;" href="/home">
        <div class="top_nav_button">
            <img height="64" width="64" src="/media/pics/home64.png"><span>Inici</span>
        </div>
    </a>
    <div class="clear">
    </div>
</div>
{% endblock %}

{% block content_base %}
<div class="container_24">
	<div class="grid_24">
	    <div class="massmedia" style="display:none;" ex:role="view" ex:showToolbox="false" ex:viewClass="Thumbnail" ex:showHeader="false">
 			<div ex:role="lens" >
					<article class="hentry">
						<header>
							<div class="entry-title">
								<a target="_blank" class="item-header" ex:href-content=".webURL"><span ex:content=".titular"></span></a>
							</div>
						</header>
						<div class="content" class="scroll-pane">
							<div class="entry-content">
								<img ex:src-content=".imageURL"></img>
								<p><span ex:content=".titular2"></p>
							</div>
						</div>
						<footer class="post-info">
							<span ex:content=".data_publicacio"></span>
							<span ex:content=".nom_mitja"></span>
						</footer>
					</article>
			</div>
 		</div>
	</div>
	
	<div class="clear:both"></div>
</div>
{% endblock %}